<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Document</title>
</head>
<style>
    .basic {
        width: 300px;
        height: 300px;
        background-color: blue;
        border: 12px;
    }

    .normal {
        width: 500px;
        height: 500px;
        background-color: green;
    }

    .happy {
        width: 350px;
        height: 500px;
        background-color: red;
    }

    .sad {
        width: 50px;
        height: 50px;
        background-color: grey;
    }
</style>

<body>
    <div id="root">
        <!-- :class v-model的简写形式 -->
        <div class="basic" :class="mood" @click="changeMood">
            你好，{{name}}
        </div>
        <!-- 数组  绑定的样式个数不确定也不清楚名字 -->
        <div :class="arr">
            SWPU
        </div>
        <!-- 对象  样式确定，但不确定是否使用 -->
        <div :class="obj"> SWPU </div>

        <div :style="{fontSize:size+'px'}"> SWPU </div>

        <div :style="Styleobj"> SWPU </div>

        <div :style="[Styleobj,style]"> SWPU </div>

        <div :style="styleArr"> SWPU </div>
    </div>
</body>
<script>
    new Vue({
        el: "#root",
        data: {
            name: "SWPU",
            mood: "normal",
            arr: ["normal", "basic"],
            obj: {
                normal: false,
                basic: false,
            },
            size: 80,
            Styleobj: {
                fontSize: "40px",
                color: "red",
                backgroundColor: "orange"
            },
            style: {
                backgroundColor: "blue"
            },
            styleArr: [
                {
                    fontSize: "80px",
                    color: "green",
                    backgroundColor: "blue"
                },
                {
                    backgroundColor: "black"
                }
            ],
            methods: {
                changeMood() {
                    // this.mood = "happy"
                    const arr = ["happy", "sad", "normal"]
                    const index = Math.floor(Math.random() * 3)//包含0不包含3
                    this.mood = arr[index]

                }
            },
        }
    })

</script>

</html>